<template>
  <div>
    <cms-back></cms-back>
    <div style="margin-left: 80px;padding-top: 20px">
      <el-tag @click="changeData('day')" :effect="dayEffect" style="cursor: pointer;">今日24小时</el-tag>
      <el-tag @click="changeData('oneWeek')" :effect="oneWeekEffect" style="cursor: pointer;">近7天</el-tag>
      <el-tag @click="changeData('twoWeek')" :effect="twoWeekEffect" style="cursor: pointer;">近14天</el-tag>
      <el-tag @click="changeData('oneMonth')" :effect="oneMonthEffect" style="cursor: pointer;">近30天</el-tag>
      <el-button @click="exportExcel()">导出</el-button>
      <span style="padding-left: 150px;color: #999;">【{{params.channelName}}】频道访问统计</span>
    </div>
    <div style="height:500px;" ref="chartLine"></div>
    <div class="el-table el-table--fit el-table--striped el-table--enable-row-hover el-table--enable-row-transition"
         style="padding-bottom:20px;">
      <div class="el-table__header-wrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 98%;margin: 0 auto;">
          <thead class="has-gutter">
          <tr class="">
            <th class="el-table_3_column_15  is-center   is-leaf">
              <div class="cell">序号</div>
            </th>
            <th class="el-table_3_column_16  is-center   is-leaf">
              <div class="cell">{{params.chartType=="day"?"时间":"日期"}}</div>
            </th>
            <th class="el-table_3_column_17  is-center   is-leaf">
              <div class="cell">访问量（PV）</div>
            </th>
            <th class="el-table_3_column_18  is-center   is-leaf">
              <div class="cell">IP數量</div>
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <div class="el-table__body-wrapper is-scrolling-none">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 98%;margin: 0 auto;">
          <tbody>
          <tr :class="['el-table__row',(index%2)==0?'el-table__row--striped':'']" v-for="(item,index) in searchData">
            <td class="el-table_4_column_20 is-center ">
              <div class="cell">{{index+1}}</div>
            </td>
            <td class="el-table_4_column_21 is-center ">
              <div class="cell">{{item.browseTime}}{{params.chartType=="day"?"时":""}}</div>
            </td>
            <td class="el-table_4_column_22 is-center ">
              <div class="cell">{{item.browseNum}}</div>
            </td>
            <td class="el-table_4_column_23 is-center ">
              <div class="cell">{{item.ipBrowseNum}}</div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        params: {
          chartType: 'day',
          channelId: this.$route.query.id,
          channelName: this.$route.query.channelName,
        },
        searchData: [],
        dayEffect: 'dark',
        oneWeekEffect: 'light',
        twoWeekEffect: 'light',
        oneMonthEffect: 'light',
      }
    },
    created() {
    },
    methods: {
      // 获取折线图
      getLine() {
        //console.log(this.params)
        axios.post(this.$api.getChannelChartData, this.params).then(res => {
          //console.log(res)
          let toolTip = "日期 : {b}<br/>访问量 : {c}次";
          let name = "日期";
          if (this.params.chartType == "day") {
            toolTip = "时间 : {b}点<br/>访问量 : {c}次";
            name = "小时";
          }
          let result = res.body;
          this.searchData = result;
          //console.log(this.searchData)
          let xData = [];
          let yData = [];
          let yipData = [];
          for (let i in result) {
            let chart = result[i];
            if (this.params.chartType == "day") {
              xData.push(chart.browseTime + '时');
            } else {
              xData.push(chart.browseTime);
            }
            yData.push(chart.browseNum);
            yipData.push(chart.ipBrowseNum);
          }
          let myChart = echarts.init(this.$refs.chartLine);
          myChart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "line"
              }
            },
            legend: {
              data: ['访问量PV', 'IP']
            },
            grid: {
              left: "5%",
              right: "5%",
              bottom: "14%",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                data: xData,
                boundaryGap: false,
                axisTick: {
                  alignWithLabel: true
                },
                nameGap: 2,
                axisLabel: {
                  interval: 0,
                  rotate: 40
                }
              }
            ],
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "访问量PV",
                //类型为折线图
                type: "line",
                //折线样式
                lineStyle: {
                  normal: {
                    //宽度
                    width: 1,
                    type: "solid",
                    //阴影颜色
                    shadowColor: "rgba(0,0,0,0.1)",
                    // 阴影的模糊范围
                    shadowBlur: 10,
                    // 阴影的纵向位移量
                    shadowOffsetY: 10
                  }
                },
                areaStyle: {
                  normal: {
                    // 折线范围内的背景色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#E7F1F5"
                      },
                      {
                        offset: 1,
                        color: "#E7F1F5"
                      }
                    ])
                  }
                },
                data: yData
              }, {
                name: "IP",
                type: "line",
                data: yipData
              }
            ]
          });
          myChart.resize();
        }).catch(err => {
          this.loading = false;
        });
      },
      changeData(chartType) {
        this.params.chartType = chartType
        if (chartType == 'day') {
          this.dayEffect = 'dark';
          this.oneWeekEffect = 'light';
          this.twoWeekEffect = 'light';
          this.oneMonthEffect = 'light';
        }
        if (chartType == 'oneWeek') {
          this.dayEffect = 'light';
          this.oneWeekEffect = 'dark';
          this.twoWeekEffect = 'light';
          this.oneMonthEffect = 'light';
        }
        if (chartType == 'twoWeek') {
          this.dayEffect = 'light';
          this.oneWeekEffect = 'light';
          this.twoWeekEffect = 'dark';
          this.oneMonthEffect = 'light';
        }
        if (chartType == 'oneMonth') {
          this.dayEffect = 'light';
          this.oneWeekEffect = 'light';
          this.twoWeekEffect = 'light';
          this.oneMonthEffect = 'dark';
        }
        this.getLine();
      },
      exportExcel() {
        if (this.searchData.length > 0) {
          this.getExcel(this.searchData);
        } else {
          this.errorMessage("暂无可导出数据");
        }
      },
      getExcel: function (res) {
        require.ensure([], () => {
          const {export_json_to_excel} = require('../../../vendor/Export2Excel.js');
          let tHeader = ['日期', '访问总量（PV）', 'IP数量'];
          let chartType = this.params.chartType;
          if (chartType == "day") {
            tHeader = ['时间', '访问总量（PV）', 'IP数量'];
          }
          const filterVal = ['browseTime', 'browseNum', 'ipBrowseNum']
          const list = res
          const data = this.formatJson(filterVal, list)
          let channelName = this.params.channelName + '频道';
          if (chartType == 'day') {
            channelName += "今日";
          }
          if (chartType == 'oneWeek') {
            channelName += "近7天";
          }
          if (chartType == 'twoWeek') {
            channelName += "近14天";
          }
          if (chartType == 'oneMonth') {
            channelName += "近30天";
          }
          export_json_to_excel(tHeader, data, channelName + '访问统计表')
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    },
    mounted() {
      this.getLine();
    }
  };
</script>


<style lang="scss" scoped>

</style>
